<!-- 
    有时候想设置h1上下的内边距为10px，左右不想设置，那怎么实现呢 ？
        方式一： h1 { 10px 0 10px 0 }
        方式二： h1 { 10px 0 }  
        第一个值表示上下，第二个值表示左右  
        内边距（padding）   边框（border）     外边距（margin）
 -->
 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title></title>
         <style type="text/css">
             div{
                 border:1px solid black;
             }
             #outerDiv{
                 width: 500px;
                 height: 500px;
             }
             #innerDiv{
                 width: 280px;
                 height: 280px;
                 background-color: red;
                 /*外边距*/
                 margin: 100px;
                 /*内边距*/
                 padding: 10px;
             }
         </style>
     </head>
     <body>
         <!--
             1、先创建一个div，它的内部也创建一个div，两个div同时设置边框 宽度1像素 实线 黑框
             2、外层div高度宽度各500像素，内部div高度，宽度各280像素，背景色为红色
             3、设置内部div的外边距100px，内边距为10px 
         -->
         <div id="outerDiv">
             <div id="innerDiv">
                 
             </div>
         </div>
     </body>
 </html>